<template>
	<view>
		<view class="tab">
			<view class="tab_title">
				<scroll-view scroll-x="true" class="scroll_x">
					<view>
						<image src="../../../static/shouhu.png" mode="" style="width: 30rpx; height: 35rpx;"></image>
					</view>
					<view>要闻</view>
					<view>推荐</view>
					<view>关注流</view>
					<view>24小时</view>
					<view>娱乐</view>
					<view>桂林</view>
					<view>财经</view>
					<view>生活</view>
					<view>科技</view>
					<view>军事</view>
					<view>体育</view>
					<view>汽修</view>
					<view>健康</view>
					<view>国际</view>
					<view>千里眼</view>
					<view>5g</view>
				</scroll-view>
			</view>
		</view>
		<view class="three">
			<view class="three-s">
				为您更新了15条内容
			</view>
		</view>
		<view class="twoss">
			<view class="twos" style="color: #FFFFFF;">
				35度 晴朗 珠海 PM2.59
			</view>
			<view class="left">
				<input class="search_input" type="text" style="width: 180rpx; margin-right: 20rpx; font-size: 25rpx;" placeholder='搜索关键词'  />
			</view>
		</view>
		<view class="d-three">
			<view class="xw-three">
				<view>
					2020,我们温暖的记忆
				</view>
				<view class="threes">
					<view class="j"><text class="zd">置顶</text></view>
					<view class="j">新闻联播</view>
					<view class="j">45好评</view>
				</view>
			</view>
			<view class="xw-three">
				<view>
					广科20栋奸商表演空中飞人
				</view>
				<view class="threes">
					<view class="j"><text class="zd">置顶</text></view>
					<view class="j">光明网</view>
					<view class="j">999+好评</view>
				</view>
			</view>
		</view>
		<navigator url="newsinfo">
			<view class="d-three">
				<view class="d-threes">
					<view class="cjn">
						<image style="width: 200rpx; height: 160rpx;" src="../../../static/d.png" ></image>
						<view class="d-threess">塞尔达天下第一</view>
					</view>
					
				</view>
				<view>
					<view class="threess">任天堂网 999+好评</view>
				</view>
			</view>
		</navigator>
		
		
		<view class="d-three">
			<view class="d-threes">
				<view class="cjn">
					<image style="width: 200rpx; height: 160rpx;" src="../../../static/xw10.png" mode=""></image>
					<view class="d-threess">广科某学生深夜吴误闯女生宿舍</view>
				</view>
				
			</view>
			<view>
				<view class="threess">科干独家报道 999+好评</view>
			</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view class="cjn">
					<image style="width: 200rpx; height: 160rpx;" src="../../../static/b.png" mode=""></image>
					<view class="d-threess">聚众可耻！疫情期间禁止聚众！</view>
				</view>

			</view>
			<view>
				<view class="threess">正能量君 88好评	</view>
			</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view class="cjn">
					<image style="display:200rpx; height: 160rpx;" src="../../../static/c.png" mode=""></image>
					<image style="display:200rpx; height: 160rpx;" src="../../../static/b.png" mode=""></image>
					<image style="display:200rpx; height: 160rpx;" src="../../../static/f.png" mode=""></image>
				</view>
				
			</view>
			<view class="threess">广告 zyx'h文化主流</view>
		</view>
		<view class="d-three">
			<view class="d-threes">
				<view class="cjn">
					<image style="width: 200rpx; height:160rpx;" src="../../../static/f.png" mode=""></image>
					<view class="d-threess">中国全面进入小康社会，人民的幸福水平大幅提升</view>
				</view>
				
			</view>
			<view class="threess">中国发展 999+好评</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.search{
	display: flex;
	flex-direction: row;
}
.two{
	margin: 0rpx 40rpx 25rpx 30rpx;
	color: #FFFFFF;
	margin-top: 30rpx;
	display:flex;
	flex-direction: row;
}
.tows{
	
	display: flex;
	margin-top: 10rpx;
	width: 100%;
	justify-content: space-betsween;
	height: 70rpx;
	;
}
.left{
	padding-left: 80rpx;
	padding-top: 20rpx;
}
.twoss{
	padding-left: 20rpx;
	display: inline-flex;
	background-color: #DD524D;
	line-height: 80rpx;
	width: 100%;
}
.reds{
	color: #DD524D;
	height: 40rpx;
}
.xw-three{}
.three{
	width: 100%;
	height: 80rpx;
	background-color: #DD524D;
}
.three-s{
	color: #FFFFFF;
}
.d-threes{
	margin-left: 20rpx;
	
}
.cjn{
	display: flex;
}
.d-three{
	border-bottom: 1rpx solid #CCd0d9;
	margin: 20rpx 20rpx 20rpx 20rpx;
}
.d-threess{
	margin-left: 20rpx;
	
}

.cjn image{
	margin-left: 10rpx;
}

.threes{
	display: flex;
	flex-direction: row;
	margin: 5rpx 10rpx 10rpx 10rpx;
	font-size: 25rpx;
	color: #808080;
}
.j{
	margin-right: 25rpx;
}
.threess{
	margin: 20rpx;
	font-size: 25rpx;
	color: #808080;
}

.search .left{
	flex: 1;
	-webkit-flex:1;
	margin-right:  70rpx;
	height: 10rpx;
}
.search .right{
	width: 120rpx;
}
.search_input{
	background-color: #f8f8f8;
	border-radius: 40rpx;
	padding: 5rpx 30rpx 6rpx 30rpx;
	margin-right: 1rpx;
}
.search_img{
	height: 48rpx;
	width: 48rpx;
}
.tab_title view{
	display: inline-block;
	margin-left: 30rpx;
	line-height: 80rpx;
	height: 80rpx;
	color: #FFFFFF;
}
.tab{
	background-color: #DD524D;
	height: 100rpx;
	position: fixed;
	z-index: 1;
	left: 0;
	right: 0;
	width: 100%;
	margin-top: 0rpx;
}
.zd{
	color: #dd524d;
}
.scroll_x{
	height: 60rpx;
	width: 100%;
	white-space: normal;
}
.scroll-view::-webkit-scrollbar{
	display: none;
	width: 0;
	height: 0;
	color: transparent;
}
.news_list{
	margin: 200rpx 25rpx 25rpx 25rpx;
	position: absolute;
	padding-bottom: calc(var(--window-bottom));
	width: 100%;
}
.news_item{
	height: 150rpx;
	border-bottom: 1rpx solid #C8C7CC;
	display: flex;
	flex-direction: row;
	margin-bottom: 20rpx;
}
.news_list image{
	width: 180rpx;
	height: 140rpx;
	margin-right: 30rpx;
}
.news_list .title{
	font-size: 35rpx;
	
}
.news_list .time{
	color: #C0C0C0;
	font-size: 30rpx;
	margin-top: 15rpx;
}
</style>
